<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css">
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <link rel="stylesheet" type="text/css" href="../../css/common.css">
    <script type="text/javascript" src="../../script/api.js"></script>
</head>
<style>
.aui-searchbar-input1{
    box-sizing: border-box;
    padding-left: 3.5%;
    width: 68%;
    margin-left: 14.3%;
    border-radius: 12px;
    border: 1px solid #fdf0d9;
    height:1.6rem;
    line-height: 0.1rem;
    font-size: 0.6rem;
    color: #f0d4ad;
    position: relative;
    display: -webkit-box;
    -webkit-box-flex: 1;
}


</style>

<body style="background-color: #dcdcdc;">
    <header class="aui-bar aui-bar-nav" style="background-color: #f8911b;height: 3rem;">
        <span style="float: left;font-size: 0.8rem;margin:0.3rem 0.5rem;" onclick="api.closeWin();">取消</span>
        <div class="aui-searchbar-input1 "style="background-color: #ffffff;margin:1rem 3rem;"id="keyword" tapmode onclick="opanSearch()">
            <i class="aui-iconfont aui-icon-search" style="color:#878484;top: -0.28rem;left: -0.2rem;"></i>
            <input style="text-align: left;height: 1.3rem;" type="search"  placeholder="搜各大商城宝贝，购物更省钱" font-color="ffffff" id="search_input">
            
        </div>
        <button style="width: 2rem;height: 1.4rem;float: right;margin: -2.5rem 0.5rem;line-height: 0.1rem;background-color: #ff6d00;border: none;"><span style="float: left;margin-left: -0.3rem;">搜索</span></button>
    </header>
    <div style="display: flex;flex-direction: column;">
   <div style="height: 10rem;">
    <span>&nbsp;热搜索</span>
    </div>
   <div>
       <span>&nbsp;历史搜索</span>

</div>
    </div>
   
</body>
<script type="text/javascript">

    apiready = function() {
        
    var suggestObj = {};
    suggestObj.tips = {
        tips01: ''
    };
    suggestObj.searchData = [];
 
    suggestObj.events = {
        closedAd: function () {
            document.querySelectorAll("#closedAdId")[0].addEventListener("touchend", function () {
                $(".ads").hide();
            });
        },
//      输入内容请求ajax并在页面显示
        keydownText: function () {
            document.getElementById("searchInput").addEventListener('input', function () {
                var inputVal = $("#searchInput").val();
                var carList = $(".searchCarList");
                var carListLi = '';
                var url = "/suggestmapps.php?";
                $.ajax({
                    type: "GET",
                    url: url,
                    dataType: "jsonp",
                    data: {q: inputVal},
                    async: true,
                    jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
                    jsonpCallback: "getSuggestInfo",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
                    success: function (data) {
                        if (data.code == 1) {
                            for (var i = 0; i < data.info.length; i++) {
                                carListLi += '<li><a href="' + data.info[i].url + '" onclick="suggestObj.events.saveSearchInfo(this)"><span>车系页>></span><em>' + data.info[i].name + '</em></a></li>';
 
                            }
                            carList.html(carListLi);
                            $("#historyRecord h1").hide();
                            $("#historyRecord .clear").hide();
                        }
                    },
                    error: function () {
                    }
                });
            });
        },
        saveSearchInfo: function (t) {
            var val = $(t).children("em").html();
            val = val + ':::' + t.href;
            var valIndex = suggestObj.searchData.indexOf(val);
 
            if (valIndex == -1) {
                suggestObj.searchData.unshift(val);
            } else {
                suggestObj.searchData.splice(valIndex, 1);
                suggestObj.searchData.unshift(val);
            }
 
            if (suggestObj.searchData.length > 20) {
                suggestObj.searchData.length = 20;
            }
 
            var suggestName_Url = suggestObj.searchData.join('@@@');
 
            var suggestNameInfo = $.cookie('suggestNameUrl');
            if (suggestNameInfo) {
                suggestName_Url += '@@@' + suggestNameInfo;
            }
 
            var eday = new Date();
            eday.setTime(eday.getTime() + (3600 * 24 * 3600000));
            $.cookie('suggestNameUrl', suggestName_Url, {
                path: '/',
                domain: 'xxx.com',
                expires: eday
            });
        },
        getInputFocus: function () {
            var currentCookie = $.cookie('suggestNameUrl');
            var historyHtml = $(".searchCarList");
            var historyHtmlLi = "";
            alert(currentCookie);
            if ( currentCookie != null && typeof currentCookie != undefined) {
                var strSplit = currentCookie.split("@@@"); //字符分割
                for (var i = 0; i < strSplit.length; i++) {
                    if(i>5) break;
                    var historyHtmlObg = strSplit[i].split(":::");
                    historyHtmlLi += '<li><a href="' + historyHtmlObg[1] + '"><span>车系页>></span><em>' + historyHtmlObg[0] + '</em></a></li>';
                }
                historyHtml.html(historyHtmlLi);
                $("#historyRecord h1").show();
                $("#historyRecord .clear").css("display", "block");
            }
        },
        delCookie: function () {
            var date=new Date();
            date.setTime(date.getTime()-10000);
            $.cookie('suggestNameUrl','',{path: '/', domain: 'xxx.com', expires:date});
        },
        onClickBtn: function () {
            document.querySelectorAll(".clear")[0].addEventListener("click", function () {
                $("#historyRecord").hide();
                suggestObj.events.delCookie();
            })
        }
    };
 
    //调用
    suggestObj.events.closedAd();
    suggestObj.events.keydownText();
    suggestObj.events.onClickBtn();


    }
</script>

</html>
